import Taro from "@tarojs/taro";
import {
  View, OpenData, Image
} from "@tarojs/components";
import "./index.scss";
import { useEffect, useState } from "react";
import { PhonePermissionClickContainer } from "@/components/phone-permission";
import IconFont from "@/components/iconfont";
import { IConfigMineIcons } from "./config";
import { IconBox } from "@/components/icon-box/IconBox";
import { CustomRequest } from "@/utils/request";
import { queryUserInfo } from "../index/api";

const UserCenter = () => {
  const reLaunchPath = "/pages/mine/index";

  const [user, setUser] = useState({ image: '', level: 0, name: '', id: '', phone: '' })

  useEffect(() => {
    queryUserInfo().then((res: any) => {
      if (res) {
        setUser(res)
      }
    })
  }, [])

  const getAuthAvatar = () => {
    Taro.getUserProfile({
      desc: '完善资料',
      success: (res) => {
        const { avatarUrl, nickName } = res.userInfo;
        CustomRequest.post('/api/user/user/edit', {
          id: user.id,
          image: avatarUrl,
          name: nickName
        }).then((res: any) => {
          // if (res) {
            // Taro.setStorageSync("userId", 1);
            Taro.reLaunch({
              url: reLaunchPath
            })
            return;
          // }
        });
      }
    })
  }

  return (
    <View className="user">
      <View className="user-center">
        {/**头像 */}
        <View className="profile at-row at-row--wrap" onClick={getAuthAvatar}>
          {/* <Image className='at-col-3' src={avatar} mode='widthFix' /> */}
          <View className="avatar-wrap at-col-3 ">
            {
              user.image ?
                <Image className='avatar' src={user.image} mode='widthFix' />
                :
                <OpenData
                  type="userAvatarUrl"
                  className="avatar"
                />
            }

          </View>

          <View className="profile-content at-col-9 at-row--wrap">
            <View className="at-col at-col-8 title">
              {
                user && user.name ?
                  <View className='name'>{user.name}</View>
                  :
                  <OpenData type="userNickName" className="name" />
              }

              {
                user ?
                  <View>{`等级Lv ${user.level}`}</View> : ''
              }

            </View>

            <View className="at-col at-col-4">
              {/* <PhonePermissionClickContainer reLaunchPath={reLaunchPath}> */}
              <View className="tel">
                {user.phone
                  ? user.phone
                  :
                  <IconFont name='right' size={40} />
                }
              </View>
              {/* </PhonePermissionClickContainer> */}
            </View>
          </View>
        </View>

        {/**订单和课表 */}
        <View className='container at-row order'>
          <View className='at-col box' style={{ background: '#fef1ec' }}>
            <IconFont name='dingdanxiangqing-dingdanbianhao' size={60} color='orange' />
            <View>我的订单</View>
          </View>
          <View className='at-col box' style={{ background: '#ecf6ff' }}>
            <IconFont name='kebiao2' size={60} />
            <View>我的课程</View>
          </View>
        </View>
        {/**六个菜单 */}
        <View className='container at-row at-row--wrap'>
          {
            IConfigMineIcons.map((i) => (
              <View className='at-col at-col-3' onClick={() => {
                if (i.link) {
                  Taro.navigateTo({
                    url: i.link
                  })
                }
              }}>
                <IconBox name={i.icon} size={60} title={i.name} fontSize={14} />
              </View>
            ))
          }
        </View>
      </View>
    </View>
  );
}

export default UserCenter;
